<template>
  <!-- 往下滑 不显示 isVisiable = false  选第二个  设置为不可显示的  -->
  <!-- 往上滑  显示  isVisiable = true   选第一个  设置为可见显示的  -->
  <!-- <div id="header" :class="isVisiable ? 'header-navigation slideDown': 'header-navigation slideUp'"> -->
  <div id="header" v-show="isVisiable">
    <div class="navigation">
      <!-- 网站名logo -->
      <div class="logo">
        <router-link to="/" style="width: 100%; height: 60px">
          <img src="../images/logo.png" />
          <!-- <a href="javascript:void(0);" v-if="info.name">{{ info.name }}</a> -->
        </router-link>
      </div>
      <div class="navigationbar">
        <!-- 菜单栏 -->
        <ul>
          <!-- 设置当前激活的效果 -->
          <li v-for="item in navigationList" :key="item.navigationId">
            <!--判断是否有下拉菜单-->
            <span v-if="item.childNar != null && item.childNar.length > 0">
              <!-- 下拉菜单 -->
              <el-dropdown @command="handleCommand" szie="small">
                <!-- 显示菜单名 是否存在子菜单  当前菜单下的子菜单-->
                <span
                  :class="
                    item.navigationUrl == activeIndex ? 'active-index' : ''
                  "
                >
                  {{ item.navigationName
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    class="dropdown-item"
                    :key="index"
                    :command="childItem.subjectId"
                    v-for="(childItem, index) in item.childNar"
                  >
                    {{ childItem.subjectName }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
            <!--没有有下拉菜单 傻逼  这个只是显示而已 你这里循环干嘛   先我们循环一级菜单 然后里面判断 循环子菜单-->
            <!-- 添加当前激活对象 -->
            <span v-else>
              <router-link
                :to="item.navigationUrl"
                class="navigationName"
                @click.native="changeActiveIndex(item.navigationUrl)"
                :class="item.navigationUrl == activeIndex ? 'active-index' : ''"
              >
                {{ item.navigationName }}
              </router-link>
            </span>
          </li>
        </ul>
        <div class="search">
          <el-input
            style="width: 100% !important"
            placeholder="请输入关键词..."
            v-model="keyword"
          ></el-input>
          <i class="iconfont" @click="searchArticle()">&#xe86e;</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/navbar.css";

import { selectNavigationBarList } from "../api/index.js";

export default {
  name: "navbar",
  data() {
    return {
      avatar: "",
      isVisiable: true,
      activeIndex: "/article",
      navigationList: [],
      keyword: "",
      isSubject: false,
    };
  },
  created() {
    this.getNavigationBarList();
  },
  methods: {
    searchArticle() {
      // 跳转到搜索页面 携带参数
      // 如果当前处于
      this.$router.replace({ path: "/search", query: { keyword: this.keyword } });
    },
    toSubject(subjectId) {},

    changeActiveIndex(activeIndex) {
      if (this.isSubject) {
        this.isSubject = false;
      }
      this.activeIndex = activeIndex;
    },

    getNavigationBarList() {
      selectNavigationBarList().then((response) => {
        this.navigationList = response.data;
      });
    },

    handleCommand(subjectId) {
      this.activeIndex = "/subject";
      // 如果是专栏页面  则不需要切换
      this.isSubject = true;
      // 跳转页面
      this.$router.push({ path: "/subject", query: { subjectId: subjectId } });
    },
  },
  mounted() {
    // 因为钩子函数中this 是指的window作用域  所以 需要转换为其他变量才能访问到data的数据
    var that = this;
    var offset = 300;
    var after = 0;
    window.addEventListener("scroll", function () {
      if (!that.isSubject) {
        let scrollTop = document.documentElement.scrollTop; //当前的的位置 0 10
        let scrollHeight = document.documentElement.scrollHeight; //最高的位置
        // if (scrollTop > offset) {
        //   that.isCdTopVisible = true;
        // } else {
        //   that.isCdTopVisible = false;
        // }  0
        if (scrollTop > after) {
          that.isVisiable = false;
        } else {
          that.isVisiable = true;
        }
        after = scrollTop;
      }
    });

    // 屏幕自适应
    window.onresize = () => {
      return () => {
        that.setSize();
      };
    };
  },
};
</script>

<style>
.active-index {
  color: pink;
}
</style>
